<template>
    <!-- 合同信息 -->
<div class="contractb">
    <span class="spanone">核心企业合同签订</span>
    <h3>合同信息</h3>
    <!-- 导航栏 -->
    <div class="contractbh">
        <div class="img">
            <el-icon><Back /></el-icon>
        </div>
        <div class="tabbar">
            <el-tabs
                v-model="activeName"
                type="card"
                 style="margin-bottom: 200px"
            >
            <!-- 基本信息 -->
                <el-tab-pane label="基本信息" name="one">
                    <!-- 基本信息 -->
                    <!-- 借款需求-表格 -->
            <div class="" v-for="(v,i) in tableDataliste"  :key="i">
                <el-descriptions
                    title="借款需求"
                    :column="3"
                    border
                >
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        放款人信息
                        </div>
                    </template>
                        <el-input v-model="input1" :placeholder="v.htLenders" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        开户机构
                        </div>
                    </template>
                        <el-input v-model="input2" :placeholder="v.htAccountbody" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        付款账户
                        </div>
                    </template>
                        <el-input v-model="input3" :placeholder="v.htPaymentaccount" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        合同编号
                        </div>
                    </template>
                        <el-input v-model="input4" :placeholder="v.htContractid" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        签署日期
                        </div>
                    </template>
                        <el-input v-model="input5" :placeholder="v.htSignndate" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        客户名称
                        </div>
                    </template>
                        <el-input v-model="input6" :placeholder="v.htCustomer" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        签署地址
                        </div>
                    </template>
                        <el-input v-model="input7" :placeholder="v.htSignnadderss" />
                    </el-descriptions-item>
                </el-descriptions>

                <el-descriptions
                    :column="3"
                    border
                >
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        借款金额
                        </div>
                    </template>
                        <el-input v-model="input8" :placeholder="v.htAmounmoney" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        产品名称
                        </div>
                    </template>
                        <el-input v-model="input9" :placeholder="v.htProductname" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        还款方式
                        </div>
                    </template>
                        <el-input v-model="input10" :placeholder="v.htRepaymentway" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        期限类型
                        </div>
                    </template>
                        <el-input v-model="input11" :placeholder="v.htTermtype" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        期限
                        </div>
                    </template>
                        <el-input v-model="input12" :placeholder="v.htTerm" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        月利率(%)
                        </div>
                    </template>
                        <el-input v-model="input13" :placeholder="v.htMonthrates" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        手续费率(%)
                        </div>
                    </template>
                        <el-input v-model="input14" :placeholder="v.htPremiumrates" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        违约利率(%)
                        </div>
                    </template>
                        <el-input v-model="input15" :placeholder="v.htBreachrates" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        借款主体
                        </div>
                    </template>
                        <el-input v-model="input16" :placeholder="v.htAmounbody" />
                    </el-descriptions-item>
                    <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">
                        借款用途
                        </div>
                    </template>
                        <el-input
                            v-model="textarea"
                            :rows="2"
                            type="textarea"
                            :placeholder="v.htAmounusage"
                        />
                    </el-descriptions-item>
                </el-descriptions>
            </div>
                <!-- 银行账户信息 -->
                <div class="brands">
                    银行账户信息 
                    <el-button type="primary" plain><el-icon><Plus /></el-icon>新增</el-button>
                </div>
                <el-descriptions
                    direction="vertical"
                    :column="7"
                    border
                    v-for="(v,i) in tableDatalisted"
                    :key="i"
                >
                    <el-descriptions-item align="center" width="80px">
                    <template #label>
                        <div class="cell-item">
                        序号
                        </div>
                    </template>
                        {{v.htContractid+1}}
                    </el-descriptions-item>
                    <el-descriptions-item align="center">
                    <template #label>
                        <div class="cell-item">
                        开户机构
                        </div>
                    </template>
                        <el-input v-model="input17" :value="v.htAccountbody" />
                    </el-descriptions-item>
                    <el-descriptions-item align="center">
                    <template #label>
                        <div class="cell-item">
                        收款账户账号
                        </div>
                    </template>
                        <el-input v-model="input18" :value="v.htReceivingaccount" />
                    </el-descriptions-item>
                    <el-descriptions-item align="center">
                    <template #label>
                        <div class="cell-item">
                        所属省分行
                        </div>
                    </template>
                        <el-input v-model="input19" :value="v.htProvincebranch" />
                    </el-descriptions-item>
                    <el-descriptions-item align="center">
                    <template #label>
                        <div class="cell-item">
                        所属市分行
                        </div>
                    </template>
                        <el-input v-model="input20" :value="v.htMunicipalitybranch" />
                    </el-descriptions-item>
                    <el-descriptions-item align="center">
                    <template #label>
                        <div class="cell-item">
                        所属支行
                        </div>
                    </template>
                        <el-input v-model="input21" :value="v.htSubbranch" />
                    </el-descriptions-item>
                    <el-descriptions-item align="center">
                    <template #label>
                        <div class="cell-item">
                        操作
                        </div>
                    </template>
                        <el-icon color="#409EFC">
                            <Delete />
                        </el-icon>
                    </el-descriptions-item>
                </el-descriptions>
                <!-- 合同信息 -->
                <div class="brands brandsh">
                    合同信息 
                    <el-button type="primary" plain><el-icon><Plus /></el-icon>新增</el-button>
                </div>
                <el-descriptions
                    direction="vertical"
                    :column="5"
                    border
                    v-for="(v,i) in tableDatalisteds"
                    :key="i"
                >
                    <el-descriptions-item align="center" width="80px">
                    <template #label>
                        <div class="cell-item">
                        序号
                        </div>
                    </template>
                        {{v.htContractid+1}}
                    </el-descriptions-item>
                    <el-descriptions-item align="center">
                    <template #label>
                        <div class="cell-item">
                        合同名称
                        </div>
                    </template>
                        <el-input v-model="input22" :value="v.htContractname" />
                    </el-descriptions-item>
                    <el-descriptions-item align="center">
                    <template #label>
                        <div class="cell-item">
                        备注
                        </div>
                    </template>
                        <el-input v-model="input23" :value="v.htFilesize" />
                    </el-descriptions-item>
                    <el-descriptions-item align="center">
                    <template #label>
                        <div class="cell-item">
                        文件大小
                        </div>
                    </template>
                        <el-input v-model="input24" :value="v.htRemark" />
                    </el-descriptions-item>
                    <el-descriptions-item align="center">
                    <template #label>
                        <div class="cell-item">
                        操作
                        </div>
                    </template>
                        <el-icon color="#409EFC">
                            <Delete />
                        </el-icon>
                    </el-descriptions-item>
                </el-descriptions>
                <!-- bottom -->
                <div class="bottom">
                    <el-button plain>保存</el-button>
                    <el-button plain>提交</el-button>
                    <el-button plain @click="fan">返回</el-button>
                </div>
            
                <!-- 附件材料 -->
                </el-tab-pane>
                <el-tab-pane label="附件材料" name="two" class="materials">
                    <span class="materials-span">附件材料</span>
                    <el-button type="primary" plain>打包下载</el-button>
                    <!-- 附件 -->
                    <p class="materials-p">附件1：房产证</p>
                    <el-upload action="#" list-type="picture-card" :auto-upload="false">
                    <el-icon><Plus /></el-icon>

                    <template #file="{ file }">
                    <div>
                        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                        <span class="el-upload-list__item-actions">
                        <span
                            class="el-upload-list__item-preview"
                            @click="handlePictureCardPreview(file)"
                        >
                            <el-icon><zoom-in /></el-icon>
                        </span>
                        <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleDownload(file)"
                        >
                            <el-icon><Download /></el-icon>
                        </span>
                        <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                        >
                            <el-icon><Delete /></el-icon>
                        </span>
                        </span>
                    </div>
                </template>
                </el-upload>
                <!-- bottom -->
                <div class="bottom">
                    <el-button plain>保存</el-button>
                    <el-button plain>提交</el-button>
                    <el-button plain @click="fan">返回</el-button>
                </div>

                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
                </el-tab-pane>
                <el-tab-pane label="审批历史" name="three">
                <!-- 审批历史 -->
                <!-- 表格 -->
                <div class="approval-history">审批历史</div>
                <el-table :data="tableDataarr" style="width: 100%" >
                    <el-table-column prop="id" label="序号" width="80" >
                     <template #default="scope">
                        {{ scope.row.entHistoryreview }}
                     </template>
                    </el-table-column>
                    <el-table-column prop="date" label="步骤" width="300" >
                     <template #default="scope">
                        <input type="text" class="tableDataarr-input" :value="scope.row.entSteps">
                     </template>
                    </el-table-column>
                    <el-table-column prop="name" label="经办人" width="200">
                       <template #default="scope">
                        <input type="text" class="tableDataarr-input" :value="scope.row.entOperator">
                       </template>
                    </el-table-column>
                    <el-table-column prop="name" label="处理意见" width="200">
                       <template #default="scope">
                        <input type="text" class="tableDataarr-input" :value="scope.row.entHandingopinions">
                       </template>
                    </el-table-column>
                    <el-table-column prop="address" label="意见内容" width="300">
                       <template #default="scope">
                        <input type="text" class="tableDataarr-input" :value="scope.row.entHandingopinionsmess">
                       </template>
                    </el-table-column>
                    <el-table-column prop="address" label="处理时间" width="300">
                       <template #default="scope">
                        <input type="text" class="tableDataarr-input" :value="scope.row.entHandingtime">
                       </template>
                    </el-table-column>
                </el-table>
                <!-- bottom -->
                <div class="bottom">
                    <el-button plain>保存</el-button>
                    <el-button plain>提交</el-button>
                    <el-button plain @click="fan">返回</el-button>
                </div>
                </el-tab-pane>
                <el-tab-pane label="流程信息" name="four">
                    <!-- 流程信息 -->
                    <div class="information">流程信息</div>
                    <el-descriptions
                        class="margin-top"
                        :column="1"
                        :size="size"
                        border
                    >
                        <template #extra>
                        </template>
                        <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            处理意见
                            </div>
                        </template>
                        <el-input v-model="input26" placeholder="请输入内容" />
                        </el-descriptions-item>
                        <el-descriptions-item>
                        <template #label>
                            <div class="cell-item">
                            意见内容
                            </div>
                        </template>
                        <el-input
                            v-model="textareas"
                            :rows="2"
                            type="textarea"
                            placeholder="请输入内容"
                        />
                        </el-descriptions-item>
                    </el-descriptions>
                    <!-- bottom -->
                    <div class="bottom">
                        <el-button plain>保存</el-button>
                        <el-button plain>提交</el-button>
                        <el-button plain @click="fan">返回</el-button>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="img">
            <el-icon><Right /></el-icon>
        </div>
    </div>
    

</div>
</template>

<script setup>
    import { onMounted, ref } from 'vue'
    import {useRouter} from 'vue-router'
    import * as serviceAxios from '../../../apis/szx/data'
    // import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'

    // import  { UploadFile } from 'element-plus'

    var router=useRouter()

    const tabPosition = ref('one')
    const input1 = ref('')
    const input2 = ref('')
    const input3 = ref('')
    const input4 = ref('')
    const input5 = ref('')
    const input6 = ref('')
    const input7 = ref('')
    
    const input8 = ref('')
    const input9 = ref('')
    const input10 = ref('')
    const input11 = ref('')
    const input12 = ref('')
    const input13 = ref('')
    const input14 = ref('')
    const input15 = ref('')
    const input16 = ref('')
    const textarea = ref('')

    const input17 = ref('')
    const input18 = ref('')
    const input19 = ref('')
    const input20 = ref('')
    const input21 = ref('')

    const input22 = ref('')
    const input23 = ref('')
    const input24 = ref('')

    const input25 = ref('')

    const input26 = ref('')
    const textareas = ref('')
    
    const activeName=ref('one')
    const tableData = [
        {
            id: '12987122',
            name: 'Tom',
            amount1: '234',
            amount2: '3.2',
            amount3: 10,
        },
        {
            id: '12987123',
            name: 'Tom',
            amount1: '165',
            amount2: '4.43',
            amount3: 12,
        },
        {
            id: '12987124',
            name: 'Tom',
            amount1: '324',
            amount2: '1.9',
            amount3: 9,
        },
        {
            id: '12987125',
            name: 'Tom',
            amount1: '621',
            amount2: '2.2',
            amount3: 17,
        },
        {
            id: '12987126',
            name: 'Tom',
            amount1: '539',
            amount2: '4.1',
            amount3: 15,
        },
    ]

    const dialogImageUrl = ref('')
    const dialogVisible = ref(false)
    const disabled = ref(false)

    const handleRemove = (file) => {
    console.log(file)
    }

    const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
    }

    const handleDownload = (file) => {
    console.log(file)
    }
    var tableDataarr=ref([])
    var tableDatalisteds=ref([])
    var tableDatalisted=ref([])
    var tableDataliste=ref([])

    var fan=()=>{
        router.go(-1)
    }

    onMounted(async ()=>{
        // 核心企业（合同信息）
        var res=await serviceAxios.htProof_list();
        console.log(res.data.data);
        tableDatalisteds.value=res.data.data
        // 核心企业（银行账户信息）
        var res=await serviceAxios.htBankinfo_list();
        console.log(res.data.data);
        tableDatalisted.value=res.data.data
        // 核心企业合同（借款需求）
        var res=await serviceAxios.htContract_list();
        console.log(res.data.data);
        tableDataliste.value=res.data.data
        // 核心企业合同（审批历史）
        var res=await serviceAxios.entHistoryreview_list();
        console.log(res.data.data);
        tableDataarr.value=res.data.data
    })
</script>

<style scoped>
.contractb .contractbh{
    display: flex;
    justify-content: space-between;
}
/* 标题 */
.contractb .spanone{
    color: #fff;
    background-color: #4ba7fe;
    padding: 6px 50px;
    border-radius: 30px;
}
.contractb .img{
    background: url("https://cdn7.axureshop.com/demo/1453833/images/%E6%A0%B8%E5%BF%83%E4%BC%81%E4%B8%9A%E7%AE%A1%E7%90%86/u2521.svg") no-repeat;
    height: 60px;
    width: 60px;
}
.contractb .el-icon{
    height: 40px;
    width: 40px;
    color: #4ba7fe;
    font-size: 30px;
}
.contractb .tabbar{
    width: 92%;
}
/* 导航栏 */
.el-tabs{
    width: 100%;
}
::v-deep .el-tabs__item.is-active{
    color: #fff;
    background-color: #4ba7fe;
}
::v-deep .el-tabs__item {
    width: 360px;
}

/* 银行账户信息 */
.brands{
    margin: 16px 0;
}
.brands .el-button{
    margin-left: 50px;
}
.brandsh .el-button{
    margin-left: 80px;
}
.brands .el-button .el-icon{
    margin-left: -10px;
    font-size: 14px;
    color: #85bbee;
}
.bottom{
    float: right;
    margin: 40px;
}

/* 附件材料 */
.materials .materials-span{
    font-weight: bold;
    font-size: 20px;
}
.materials .el-button{
    margin-left: 60px;
}
.materials .materials-p{
    font-size: 12px;
    color: #777;
}
/* 审判历史,流程信息 */
.tableDataarr-input{
    width: 90%;
    height: 26px;
    outline: none;
    border: 1px solid #eee;
}

</style>